<template>
  <div class="">
    <myHeader
      v-color="$store.state.bag"
      rightText="切换主题"
      title="图书商城"
      @rightClick="rightClick"
    ></myHeader>
    <div class="inputBox">
      <myInput
        v-model="mobile"
        label="手机号码"
        placeholder="请输入手机号码"
        :iocn="success"
      ></myInput>
      <myInput
        :iocn="pwdIocn"
        v-model="pwd"
        label="密码"
        placeholder="请输入密码"
      ></myInput>
    </div>

    <my-button
      v-color="$store.state.bag"
      type="red"
      @click="loginBtn"
      :disabled="btnFlag"
      text="确定"
    ></my-button>
  </div>
</template>

<script>

import myHeader from "@/components/myHeader";
import myInput from "@/components/myInput";
import myButton from "@/components/myButton";
import { ref, watch, watchEffect } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
export default {
  setup() {
    let mobile = ref("");
    let pwd = ref("");
    let store = useStore();
    // 密码正则
    var passwordReg = /(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,30}/;
    // 手机正则
    var phoneReg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;

    // 成功图标
    let success = ref("");
    // 密码图标
    let pwdIocn = ref("");
    // 按钮的禁用状态
    let btnFlag = ref(true);

    // 路由
    let router = useRouter();
    function rightClick() {
      console.log(mobile.value);
      store.commit("changeBackColor");
    }

    // 登录按钮
    function loginBtn() {
      console.log(1);
      router.push("/book");
    }

    // 监视手机号码的逻辑
    watch(
      () => mobile.value,
      () => {
        if (phoneReg.test(mobile.value)) {
          success.value = "✔";
        } else {
          success.value = "X";
        }
        if (mobile.value.length == 0) {
          success.value = "";
        }
      }
    );
    // 监视密码的逻辑
    watch(
      () => pwd.value,
      (date) => {
        if (passwordReg.test(pwd.value)) {
          pwdIocn.value = "✔";
        } else {
          pwdIocn.value = "X";
        }
        if (pwd.value.length == 0) {
          pwdIocn.value = "";
        }
      }
    );

    watchEffect(() => {
      if (passwordReg.test(pwd.value) && phoneReg.test(mobile.value)) {
        btnFlag.value = false;
      } else {
        btnFlag.value = true;
      }
    });

    return {
      rightClick,
      mobile,
      pwdIocn,
      success,
      pwd,
      btnFlag,
      loginBtn,
      myButton,
    };
  },
  components: { myHeader, myInput, myButton },
};
</script>

<style lang="scss" scoped>
.inputBox {
  margin: 150px auto 0;
  width: 100%;
}
button {
  width: 130px;
  height: 37px;
  background-color: #ccc;
  outline: none;
  border: 0;
  border-radius: 8px;
  margin: 20px auto;
  display: block;
  color: #ffff;
}
</style>
